.root {
  position: relative;
  box-sizing: border-box;
  padding: 16px;
  background: var(--background);
  border: 1px solid var(--accents-2);
  border-radius: 5px;
  box-shadow: var(--shadow-smallest);
}

.root a {
  text-decoration: none;
}

.creator {
  display: inline-flex;
}

.meta {
  margin-left: 8px;
}

.meta:hover .name,
.meta:focus .name {
  text-decoration: underline;
}

.name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
  line-height: 20px;
}

.username {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--secondary);
  margin: 0;
  line-height: 20px;
}

.wrap {
  margin-top: 16px;
}

.content {
  color: var(--accents-6);
  font-weight: 500;
  font-size: 0.875rem;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.timestamp {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  margin: 0;
  color: var(--accents-5);
}
